<!-- https://blog.csdn.net/qq_42483780/article/details/125003251 -->

<template>
	<view class="main">
		<view class="type1" @click="funConnectBluetooth">环境信息</view>
		<view class="type2">提供环境温度、湿度等数据</view>
		
		<view class="type4" >温度</view>
		<view class="type3" > 
			<view class="type5">
				<view class="type6">T</view>
				<view class="type7">测量温度</view>
				<view class="type8">温湿度传感器</view>
				<view class="type9"> {{exportDataTemp}} </view>
				<view class="type10"> ℃</view>
			</view>
		</view>
		
		<view class="type4" @click="funSandBleMessage()">湿度</view>
		<view class="type3"> 
			<view class="type5">
				<view class="type6">H</view>
				<view class="type7">测量湿度</view>
				<view class="type8">温湿度传感器</view>
				<view class="type9"> {{exportDataHum}} </view>
				<view class="type10"> %</view>
			</view>
		</view>
		
		<view class="type4" @click="funSandBleMessage()">光照</view>
		<view class="type3"> 
			<view class="type5">
				<view class="type6">L</view>
				<view class="type7">日光检测</view>
				<view class="type8">光照传感器</view>
				<view class="type9"> {{exportDatalit}} </view>
				<view class="type10">lum</view>
			</view>
		</view>
		
		<view class="type4" @click="funSandBleMessage()">二氧化碳</view>
		<view class="type3"> 
			<view class="type5">
				<view class="type6">C</view>
				<view class="type7">Co2</view>
				<view class="type8">二氧化碳传感器 ppm</view>
				<view class="type9"> {{exportDataCo2}} </view>
				<view class="type10"></view>
			</view>
		</view>
		
		<view class="type4" @click="funSandBleMessage()"> 人体传感器</view>
		<view class="type3"> 
			<view class="type5">
				<view class="type6">P</view>
				<view class="type7">人体</view>
				<view class="type8">存在检测</view>
				<view class="type9"> {{exportDataPeo}} </view>
				<view class="type10"> @</view>
			</view>
		</view>
		
		<view class="type4" @click="funSandBleMessage()"> 烟雾</view>
		<view class="type3"> 
			<view class="type5">
				<view class="type6">S</view>
				<view class="type7">烟雾报警</view>
				<view class="type8">烟雾传感器</view>
				<view class="type9"> {{exportDataSmo}} </view>
				<view class="type10"> |</view>
			</view>
		</view>

		<view class="type4" @click="gotoZhinn1eg">自动</view>
		<view class="type3" @click="gotoZhinneg"> 
			<view class="type5">
				<view class="type12">E</view>
				<view class="type7">智能场景 </view>
				<view class="type8">更多设备联动场景</view>
				<view class="type11"> > </view>
				<!-- <view class="type10"> %</view> -->
			</view>
		</view>

	</view>
	
</template>

<script>
	var devicesList = []; //保存搜索到的蓝牙设备列表
	var tianBle = []; // 保存在蓝牙列表中找到的设备
	var server = []; //保存手表蓝牙上的每一个服务信息
	var characteristic = []; //保存手表蓝牙上的每一个服务信息的属性值
	
	export default {
		data() {
			return {
				title: 'Hello word',
				exportDataTemp:0,
				exportDataHum:0,
				exportDatalit:0,
				exportDataCo2:0,
				exportDataPeo:0,
				exportDataSmo:0,
			}
		},
		onLoad() {
			var that = this;
			that.initPage() // 初始化加载
			this.timer = setInterval(function() { // 定时器周期执行
				that.initPage()
			}, 1000)
		},
		
		methods: {
			initPage() {
				var that = this;
				uni.request({
					url: 'https://guaguagua.icu/smartHome/api/getmessage', //仅为示例，并非真实接口地址。
					sslVerify: false,
				    success: (res) => {
						console.log("获取成功");
						console.log(res.data.data);
						this.exportDataTemp = res.data.data["temperature"]
						this.exportDataHum = res.data.data["humidity"]
						this.exportDatalit = res.data.data["light"]
						this.exportDataCo2 = res.data.data["co2"]
						this.exportDataPeo = res.data.data["people"]
						this.exportDataSmo = res.data.data["smock"]
						getApp().globalData.dataTemp = this.exportDataTemp
						getApp().globalData.dataHum = this.exportDataHum
						getApp().globalData.dataLight = this.exportDatalit
						getApp().globalData.dataCo2 = this.exportDataCo2
				    },
					fail(res) {
						console.log("失败了");
						console.log(res);
					}
				});
			},


			
			loadBle() {
				var that = this;
				uni.openBluetoothAdapter({ //调用微信小程序api 打开蓝牙适配器接口
					success: function(res) {
						console.log(res)
						uni.showToast({
							title: '初始化成功',
							icon: 'success',
							duration: 800
						})
						that.findBlue(); //2.0
					},
					fail: function(res) { //如果手机上的蓝牙没有打开，可以提醒用户
						uni.showToast({
							title: '请打开蓝牙',
							type: 'error',
							icon: 'none'
						});
					}
				})
			},	
			findBlue() {
				setTimeout(()=>{
					  uni.getBLEDeviceServices({
					    // deviceId,
					    success(res) {
					      console.log("设备的服务：", res.services);
					    },
					    fail(err) {
					      console.log("获取服务失败：", err);
					    },
					  });
				  }, 5000)
			},
			getBlue() {
				var that = this
				//uni.getBluetoothDevices获取在蓝牙模块生效期间所有已发现的蓝牙设备。包括已经和本机处于连接状态的设备
				uni.getBluetoothDevices({
					success: function(res) {
						if (res.devices[0]) {
						  console.log(ab2hex(res.devices[0].advertisData))
						}
						uni.hideLoading();
						console.log(res)
						that.BluetoothList = res.devices
						console.log(that.BluetoothList)
						console.log(res.devices)
						//将BluetoothList遍历给用户，当用户点击连接某个蓝牙时调用4.0
					},
					fail: function() {
						console.log("搜索设备失败")
					}
				})
			},
			button1() {
				var that = this;
				that.loadBle()
			},
			gotoZhexian() {
				console.log("开始连接打印机:");
				// 1.不传参
				uni.navigateTo({ 
				    url:'../zhexian/zhexian'
				});
			},
			gotoZhinneg() {
				console.log("跳转界面:");
				uni.navigateTo({
				    url:'./smartCtrl'
				});
			}
		},
		
	}
</script>

<style>
	.type1 {
		font-size: 30px; 
		margin-left:3%;
	}
	
	.type2 {
		font-size: 20px;
		color: #656565;
		margin-left:3%;
	}
	
	.type3 {
		display: flex;
		justify-content: center; /* 水平居中 */
		height: 80px;
	}
	
	.type4 {
		font-size: 10px;
		color: #656565;
		margin-top: 40px;
		margin-left: 5%;
	}
	
	.type5 {
		border-radius: 15px;  /* 统一圆角 */
		background: #ffffff;  /* 背景色或边框 */
		width: 92%; 
		height: 100px;
		margin-top: 1%;
		margin-left: 0%;	
	}
	
	.type6 {
		display: flex;
		font-size: 35px;
		border-radius: 15px;  /* 统一圆角 */
		width: 50px; 
		height: 50px;
		justify-content: center; /* 水平居中 */
		color: #eaeaea;
		background-color: #4dbae1;
		margin-top: 20px;
		margin-left: 20px;
	}
	
	.type7 {
		font-size: 17px; 
		margin-left: 85px;
		margin-top: -45px;
	}
	
	.type8 {
		font-size: 15px; 
		margin-left: 85px;
		margin-top: 0px;
		color: #969696;
	}
	
	.type9 {
		font-size: 30px; 
		margin-left: 70%;
		margin-top: -12%;
		color: #000000;
	}
	
	.type10 {
		font-size: 30px;
		margin-left: 82%;
		margin-top: -11%;
		color: #969696;
	}
	
	.type11 {
		font-size: 251%;
		margin-left: 290px;
		margin-top: -50px;
		color: #d0d0d0;
	}
	
	.type12 {
		display: flex;
		font-size: 35px;
		border-radius: 15px;  /* 统一圆角 */
		width: 50px; 
		height: 50px;
		justify-content: center; /* 水平居中 */
		color: #eaeaea;
		background-color: #37ab9e;
		margin-top: 20px;
		margin-left: 20px;
	}
</style>